<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
  >
    <el-menu-item index="0">
      <img
        style="width: 100px"
        src="/favicon.ico"
        alt="Element logo"
      />
    </el-menu-item>
    <div class="flex-grow" />
    <el-menu-item
      v-for="route in visibleRoutes"
      :key="route.path"
      :index="route.path"
    >
      {{ route.name }}
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { routes } from '@/router';
import { useRouter } from 'vue-router'

const activeIndex = ref('1');
const router = useRouter();
/// 计算属性，用于根据路由记录生成菜单项
const visibleRoutes = computed(() => {
  return routes.filter(route => {
    // 在这里添加逻辑来决定哪些路由应该显示在菜单中
    // 例如，您可能只想显示那些有 `meta: { showInMenu: true }` 的路由
    return route.meta?.showInMenu;
  }).map(route => ({
    path: route.path,
    name: route.name,
  }));
});

const handleSelect = (key: string) => {
  console.log('Selected menu item:', key);
  // 使用 Vue Router 进行导航
  router.push(key).catch(err => {
    console.error('Failed to navigate:', err);
  }); // 添加 catch 来捕获并处理可能的错误
};
</script>

<style>
.flex-grow {
  flex-grow: 1;
}
</style>